<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-02-17 12:48:36
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-02-28 22:11:55
 * @FilePath: /jeecgboot-vue3/src/views/activiti/procdef/components/actProcessDefConfig/business/ConfigBusiness.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 基本用法 -->
<template>
  <!-- 自定表单 -->
  <BasicForm @register="registerForm" @submit="handleSubmit" />

  <a-button type="" @click="mySubmitForm">提交</a-button>
</template>

<script lang="ts" setup>
  //引入依赖
  import { defineProps } from 'vue'
  import { useForm, BasicForm } from '/@/components/Form'
  import { businessFormConfig } from './ConfigBusiness.data'
  import { getProcdefBusiness, addProcdefBusiness, updateProcdefBusiness } from './ConfigBusiness.api'
  import { watch } from 'vue'

  const props = defineProps({
    processDefId: {
      type: String,
      default: '',
    },
  })

  watch(
    () => props.processDefId,
    async (val) => {
      console.log('监听到流程定义id变化', val)
      if (val) {
        resetFields()
        getBusiness(val)
      }
    }
  )

  const getBusiness = async (procdefId) => {
    const business = await getProcdefBusiness({ procdefId: procdefId })
    console.log('获取流程关联业务信息', business)
    if (business) {
      setFieldsValue(business)
    } else {
      setFieldsValue({ procdefId: procdefId })
    }
  }

  /**
   * BasicForm绑定注册;
   * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
   * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
   * 平台通过此封装，简化了代码，支持自定义扩展;
   */
  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm(businessFormConfig)

  /**
   * 点击提交按钮的value值
   * @param values
   */
  async function handleSubmit(values: any) {
    console.log('提交按钮数据::::', values)
  }

  async function mySubmitForm() {
    try {
      let values = await validate()
      console.log('提交表单', values)
      //提交表单
      const data = await (!values.id ? addProcdefBusiness(values) : updateProcdefBusiness(values))
      if (!values.id && data !== null) {
        getBusiness(values.procdefId)
      }
    } finally {
    }
  }

  defineExpose({
    mySubmitForm,
  })
</script>

<style></style>
